<template>
    <div class="curriculum">
        <div class="top clearfix">
            <span class="fl active">课程</span>
            <span class="fl">班级</span>
            <span class="fr"><img src="../assets/seach.png" alt=""></span>
        </div>
        <div class="nav_bar">
            <div class="one active1" :class="{active1:isActive1=='tui'}">
                <span>推荐</span>
                <span v-if="isActive1=='tui'"><img src="../assets/sanjiao1_03.png" alt=""></span>
                 <span v-else><img src="../assets/sanjiao_03.png" alt=""></span>
            </div>
            <div class="one">
                <span>即将开班</span>
                 <span v-if="false"><img src="../assets/sanjiao1_03.png" alt=""></span>
                 <span v-else><img src="../assets/sanjiao_03.png" alt=""></span>
            </div>
            <div class="one">
                <span>优秀班级</span>
                 <span v-if="false"><img src="../assets/sanjiao1_03.png" alt=""></span>
                 <span v-else><img src="../assets/sanjiao_03.png" alt=""></span>
            </div>
            <div class="one">
                <span>班级分类</span>
                 <span v-if="false"><img src="../assets/sanjiao1_03.png" alt=""></span>
                 <span v-else><img src="../assets/sanjiao_03.png" alt=""></span>
            </div>
        </div>
        <div class="list">
           <ul class="clearfix">
               <li>
                   <div class="imgs">
                       <img src="../assets/java@2x.png" alt="">
                       <div class="xinxi clearfix">
                           <span class="fl">讲师：马建军</span>
                           <span class="fr">8学时</span>
                       </div>
                   </div>
                   <h3>思想道德修养与法律基础</h3>
                   <div class=" clearfix spncon">
                       <span class="fl spn1"><span class="spn2">￥</span><span class="spn3">180</span></span>
                       <span class="fr spn4">已报名：3227人</span>
                   </div>
               </li>
               <li>
                   <div class="imgs">
                       <img src="../assets/kuaiji1.png" alt="">
                       <div class="xinxi clearfix">
                           <span class="fl">讲师：马建军</span>
                           <span class="fr">8学时</span>
                       </div>
                   </div>
                   <h3>思想道德修养与法律基础</h3>
                   <div class=" clearfix spncon">
                       <span class="fl spn1"><span class="spn2">￥</span><span class="spn3">180</span></span>
                       <span class="fr spn4">已报名：3227人</span>
                   </div>
               </li>
               <li>
                   <div class="imgs">
                       <img src="../assets/golang.png" alt="">
                       <div class="xinxi clearfix">
                           <span class="fl">讲师：马建军</span>
                           <span class="fr">8学时</span>
                       </div>
                   </div>
                   <h3>思想道德修养与法律基础</h3>
                   <div class=" clearfix spncon">
                       <span class="fl spn1"><span class="spn2">￥</span><span class="spn3">180</span></span>
                       <span class="fr spn4">已报名：3227人</span>
                   </div>
               </li>
               <li>
                   <div class="imgs">
                       <img src="../assets/kuaiji.png" alt="">
                       <div class="xinxi clearfix">
                           <span class="fl">讲师：马建军</span>
                           <span class="fr">8学时</span>
                       </div>
                   </div>
                   <h3>思想道德修养与法律基础</h3>
                   <div class=" clearfix spncon">
                       <span class="fl spn1"><span class="spn2">￥</span><span class="spn3">180</span></span>
                       <span class="fr spn4">已报名：3227人</span>
                   </div>
               </li>
               
              
           </ul>
        </div>
        <footbar></footbar>
    </div>
</template>

<script>
import footbar from '../components/footbar'
    export default {
        name:'curriculum',
        data (){
            return{
                isActive1:'tui'
            }
        },
        components:{
            footbar
        }   
    }
</script>

<style lang="less" scoped>
@family: AlibabaPuHuiTiR;
@family1: AdobeHeitiStd_regular;
.curriculum{
    width: 100%;
    background-color: #f8f8f8;
    font-size: 0;
    position: relative;
    .top{
        width: 100%;
        height: 1rem;
        line-height: 1rem;
        background-color: #fff;
        font-family: @family1;
        font-size: 0.24rem;
        padding: 0 0.2rem;
       box-sizing: border-box;
       position: absolute;
       top:0;
       left:0;
        span{
            display: inline-block;
            &:nth-child(1){
                margin-right:0.4rem;
            }
            &.active{
                font-size: 0.3rem;
                color:rgb(237,26,34);
            }
            &.fr{
                width: 0.28rem;
                height: 0.28rem;
                img{
                    width: 100%;
                }
            }

        }

    }
    .nav_bar{
        width: 100%;
        display: flex;
        justify-content: space-between;
        font-family: @family;
        font-size: 0.24rem;
        color:rgb(49,49,49);
        background-color: #fff;
        margin-top:0.2rem;
        height: 0.5rem;
        line-height: 0.5rem;
          padding: 0 0.2rem;
        box-sizing: border-box;
        background-color: #fff;
        position: absolute;
        top:0.8rem;
        left:0;
        span{
            &:nth-child(2){
                width: 0.15rem;
                height: 0.06rem;
                display: inline-block;
                img{
                    width: 100%;
                   
                }
            }
        }
        .active1{
            color:rgb(232,29,27);
        }
    }
    .list{
        width: 100%;
        height: 13.34rem;
        margin-top:0.2rem;
        font-size: 0.24rem;
        font-family: @family;
        color:rgb(38,34,34);
        padding:0 0.2rem;
        box-sizing: border-box;
        position: absolute;
        top:1.5rem;
        left:0;
        bottom:1rem;
        overflow-y: scroll;
        li{
            width: 49%;
            // border: 1px solid red;
            float: left;
            overflow: hidden;
            margin-bottom: 0.2rem;
            &:nth-child(2n+1){
                margin-right:2%;
            }
            .imgs{
                width: 3.45rem;
                height: 2.2rem;
                position: relative;
                img{
                    width: 100%;
                    height: 100%;
                }
                .xinxi{
                    height: 0.5rem;
                    line-height: 0.5rem;
                    position: absolute;
                    left: 0;
                    bottom:0;
                    color:#fff;
                    font-size: 0.22rem;
                    width: 100%;
                    background-color: rgb(0,0,0,0.3);
                    padding:0 0.1rem;
                    box-sizing: border-box;


                }
            }
            h3{
                font-family: @family;
                color:rgb(38,34,34);
                font-size: 0.24rem;
                font-weight: 600;
                margin:0.05rem 0;

            }
            .spncon{
                span{
                    display: inline-block;
                    &.spn1{
                       
                        color:rgb(232,29,27);
                        .spn2{
                             font-size:0.10rem;
                        }
                        .spn3{
                            font-size: 0.2rem;
                        }
                    }
                    &.spn4{
                        color:rgb(170,162,162);
                        font-size:0.2rem;
                    }
                }
            }
        }
      
    }
}

</style>
<style lang="less">
.curriculum{
    .mint-tabbar {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#d9d9d9), color-stop(50%, #d9d9d9), color-stop(50%, transparent));
    background-image: linear-gradient(180deg, #d9d9d9, #d9d9d9 50%, transparent 50%);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: top left;
    position: relative;
    background-color: #fafafa;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    right: 0;
    bottom: 0;
    left: 0;
    position: fixed;
    text-align: center;
}
  }   
</style>